<!---
  @author: andy
  @description: 混合应用时的二级菜单组件
-->
<template>
  <div class="mixed-second-menu" :style="{height : `${config.secondMenu.height}px`}">
    <div class="mixed-second-inner">
      <a-menu v-if="showMenu" mode="horizontal" v-model:selected-keys="selectedKeys" :inline-indent="12" @click="onClickMenuItem">
        <a-menu-item v-for="item in accessStore.secondMenus" :key="item.code">
          <template #icon>
            <img v-if="item.icon" class="menu-icon" :src="item.icon" />
          </template>
          {{item.name}}
        </a-menu-item>
      </a-menu>
    </div>
  </div>
</template>
<script lang='ts' setup>
import { useAccessStore } from '@/stores/access/access'; 
import { findTreeNodeByValue, getPathByKey } from '@/utils/tree';
import { useConfigStore } from '@/stores/configs/config';
import { storeToRefs } from 'pinia';
import type { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
import { nextTick, ref, watch, watchEffect } from 'vue';
import { useRouter , useRoute } from 'vue-router';
import type { AccessMenuItem } from '@/stores/access/types';
const router = useRouter();
const route = useRoute();
const showMenu = ref(true);
const accessStore = useAccessStore();
const configStore = useConfigStore();
const { config } = storeToRefs(configStore);
const selectedKeys = ref<string[]>([]);
// 这里不这样干，a-menu组件有问题，我数据都已经更新了，但是内容展示不出来，而且会报警告ResizeObserver loop completed with undelivered notifications
watch(() => accessStore.secondMenus , () => {
  showMenu.value = false;
  nextTick(() => {
    showMenu.value = true;
  })
} , {deep : true})
const onClickMenuItem = ({key}: MenuInfo) => {
  accessStore.setMixedSidebarMenusByCode(key as string);
  const currentMenu = findTreeNodeByValue(accessStore.accessMenus , 'code' , key , {childProps : 'children'});
  if (!currentMenu?.children || currentMenu?.children.length === 0) {
    router.push({
      path : currentMenu?.path
    })
  }
}
const getCurrentMenu = (): AccessMenuItem | null => {
  let current: AccessMenuItem | null = null;
  const go = (tree: AccessMenuItem[]) => {
    tree.forEach(item => {
      if (item.children.length > 0) {
        go(item.children);
      } else {
        if (item.path === route.path) {
          current = item;
        }
      }
    })
  }
  go(accessStore.accessMenus);
  return current;
}
watchEffect(() => {
  const current = getCurrentMenu();
  if (current) {
    const pathList = getPathByKey(current.code , accessStore.accessMenus , {keyProp : 'code'});
    if (pathList.length > 1) {
      const code = pathList[1].code;
      selectedKeys.value = [code];
      accessStore.setMixedSidebarMenusByCode(code);
    }
  }
});
</script>
<style lang='less' scoped>
.mixed-second-menu {
  display: flex;
  align-items: center;
  padding: 0 0.24rem;
  border-bottom: 0.01rem solid;
  box-sizing: border-box;
  .useTheme({
    border-color: border-color;
  });
  .mixed-second-inner {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    .menu-icon {
      width: 0.16rem;
      height: 0.16rem;
      object-fit: cover;
      transition: all 0.3s;
    }
  }
}
</style>